import React from 'react';
import './bannerlist.css';

class Bannerlist extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            lists: this.props.lists
        }
    }
    render() {
        let cur = this.props.cur;
        let sty = {
            width: this.state.lists.length * 720 + "px"
        };
        // 轮播播放尽头
        if (cur === this.state.lists.length) {
            // 瞬间回到第一张
            Object.assign(sty, {
                transform: `translateX(0px)`,
            })
            console.log('闪现完成')
            // 通知父组件cur置1，异步，
            // 防止onEnd产生的重新渲染和闪现的重新更新冲突
            setTimeout(()=>{
                this.props.onEnd(1)
            })
        } 
        // 正常播放
        else {
            Object.assign(sty, {
                transform: `translateX(${-cur * 720}px)`,
                transition: `all 0.5s`
            })
        }
        return (
            <div className="container">
                <ul style={sty}>
                    {
                        this.state.lists.map((list, index) => <li key={index}>{list}</li>)
                    }
                </ul>
            </div>
        )
    }
}

export default Bannerlist;